<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 待办事项列表（升级版）</title>
    <!-- 引入 Vue CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .container {
            max-width: 500px;
            margin: 2rem auto;
            padding: 0 1rem;
            font-family: sans-serif;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 1.5rem;
        }
        /* 添加待办区域 */
        .add-bar {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .todo-input {
            flex: 1;
            padding: 0.6rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .btn {
            padding: 0.6rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: white;
        }
        .btn-add {
            background-color: #42b983;
        }
        .btn-del-batch {
            background-color: #f56c6c;
            margin-bottom: 1rem;
            display: none; /* 默认隐藏，通过 v-show 控制 */
        }
        .btn-edit {
            background-color: #409eff;
            margin-right: 0.3rem;
            padding: 0.3rem 0.6rem;
            font-size: 0.8rem;
        }
        /* 待办列表 */
        .todo-list {
            list-style: none;
            padding: 0;
        }
        .todo-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.8rem;
            margin-bottom: 0.5rem;
            border: 1px solid #eee;
        }
        .todo-check {
            width: 16px;
            height: 16px;
        }
        .todo-content {
            flex: 1;
            cursor: pointer;
        }
        .done {
            text-decoration: line-through;
            color: #999;
        }
        /* 状态标签 */
        .status-tag {
            padding: 0.2rem 0.5rem;
            border-radius: 12px;
            font-size: 0.7rem;
            color: white;
        }
        .status-done {
            background-color: #42b983;
        }
        .status-pending {
            background-color: #fbbf24;
        }
        /* 提示与统计 */
        .tip {
            color: #f56c6c;
            font-size: 0.8rem;
            margin: 0.3rem 0;
        }
        .stats {
            margin-top: 1rem;
            color: #666;
            font-size: 0.9rem;
        }
        /* 编辑框样式 */
        .edit-input {
            flex: 1;
            padding: 0.4rem;
            border: 1px solid #409eff;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container" id="app">
        <h1>Vue 待办列表</h1>

        <!-- 添加待办区域 -->
        <div class="add-bar">
            <input 
                type="text" 
                class="todo-input" 
                placeholder="输入待办内容"
                v-model="newTodoText"
                @keyup.enter="addTodo"
            >
            <button class="btn btn-add" @click="addTodo">添加</button>
        </div>
        <div class="tip" v-text="addTip"></div>

        <!-- 批量删除按钮 -->
        <button 
            class="btn btn-del-batch" 
            @click="deleteBatch"
            v-show="selectedIds.length > 0"
        >
            批量删除（已选：{{ selectedIds.length }}）
        </button>

        <!-- 待办列表 -->
        <ul class="todo-list">
            <li class="todo-item" v-for="(todo, index) in todos" :key="todo.id">
                <!-- 批量选择复选框 -->
                <input 
                    type="checkbox" 
                    class="todo-check" 
                    v-model="selectedIds" 
                    :value="todo.id"
                >
                
                <!-- 待办文本/编辑框（条件渲染） -->
                <span 
                    class="todo-content" 
                    :class="{ done: todo.isDone }"
                    v-if="!todo.isEditing"
                    @click="toggleDone(index)"
                >
                    {{ todo.text }}
                </span>
                <input 
                    type="text" 
                    class="edit-input" 
                    v-else
                    v-model="todo.editText"
                    @blur="finishEdit(index)"
                    @keyup.enter="finishEdit(index)"
                >
                
                <!-- 状态标签（v-html 渲染加粗文本） -->
                <span 
                    class="status-tag" 
                    :class="todo.isDone ? 'status-done' : 'status-pending'"
                    v-html="todo.isDone ? '<b>已完成</b>' : '<b>未完成</b>'"
                ></span>
                
                <!-- 编辑按钮 -->
                <button 
                    class="btn btn-edit" 
                    @click="startEdit(index)"
                    :disabled="todo.isEditing"
                >
                    编辑
                </button>
            </li>
        </ul>

        <!-- 数据统计（实时计算） -->
        <div class="stats">
            总数量：{{ todos.length }} | 已完成：{{ doneCount }} | 未完成：{{ pendingCount }}
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    newTodoText: '',    // 新增待办输入内容
                    addTip: '',         // 输入提示文本
                    selectedIds: [],    // 批量选中的待办ID数组
                    // 初始待办数据（响应式）
                    todos: [
                        { id: 1, text: '学习v-model', isDone: false, isEditing: false, editText: '' },
                        { id: 2, text: '练习v-for', isDone: true, isEditing: false, editText: '' },
                        { id: 3, text: '掌握v-bind', isDone: false, isEditing: false, editText: '' }
                    ]
                };
            },
            computed: {
                // 已完成数量（计算属性：依赖 todos 自动更新）
                doneCount() {
                    return this.todos.filter(todo => todo.isDone).length;
                },
                // 未完成数量
                pendingCount() {
                    return this.todos.filter(todo => !todo.isDone).length;
                }
            },
            methods: {
                // 1. 添加待办（支持点击按钮/回车键）
                addTodo() {
                    const text = this.newTodoText.trim();
                    if (!text) {
                        this.addTip = '请输入待办内容！';
                        return;
                    }
                    // 新增待办（时间戳作为唯一ID，避免重复）
                    this.todos.push({
                        id: Date.now(),
                        text,
                        isDone: false,
                        isEditing: false,
                        editText: text  // 编辑框初始值预设为待办文本
                    });
                    // 重置输入状态
                    this.newTodoText = '';
                    this.addTip = '';
                },

                // 2. 切换待办完成状态（点击文本触发）
                toggleDone(index) {
                    this.todos[index].isDone = !this.todos[index].isDone;
                },

                // 3. 批量删除选中待办
                deleteBatch() {
                    if (confirm(`确定删除选中的${this.selectedIds.length}项待办？`)) {
                        // 过滤掉选中的待办（保留未在 selectedIds 中的项）
                        this.todos = this.todos.filter(todo => !this.selectedIds.includes(todo.id));
                        this.selectedIds = [];  // 清空选中数组，隐藏批量删除按钮
                    }
                },

                // 4. 进入编辑状态（点击编辑按钮）
                startEdit(index) {
                    const todo = this.todos[index];
                    todo.isEditing = true;
                    todo.editText = todo.text;  // 编辑框初始值同步当前待办文本
                    // 延迟聚焦编辑框（确保DOM更新后再执行）
                    setTimeout(() => {
                        document.querySelectorAll('.edit-input')[index].focus();
                    }, 0);
                },

                // 5. 完成编辑（失去焦点/回车键）
                finishEdit(index) {
                    const todo = this.todos[index];
                    const editText = todo.editText.trim();
                    // 非空则更新待办文本，空值保留原文本
                    if (editText) {
                        todo.text = editText;
                    }
                    todo.isEditing = false;  // 退出编辑状态，显示文本
                }
            }
        });
    </script>
</body>
</html>